<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue.set的使用</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>学校信息</h2>
        <h3>学校名称:{{name}}</h3>
        <h3>学校地址:{{address}}</h3>
        <hr/>

        <h2>学生信息</h2>
        <button @click="addSex">点击添加一个信息属性，默认是男</button>
        <h2>姓名:{{student.name}}</h2>
        <h2 v-if="student.sex">性别:{{student.sex}}</h2>
        <h2>年龄：真实{{student.age.rAge}}，对外：{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
    <script>
    //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
               name: '尚硅谷',
               address: '北京',
               student: {
                   name: 'tom',
                   age: {
                       rAge: 35,
                       sAge: 36
                   },
                   friends: [
                       {name: 'jack',age: 18},
                       {name: 'tony',age: 22}
                   ]
               }
           },
           methods: {
                addSex(){
                    //Vue.set(this.student,'sex','男');
                    this.$set(this.student,'sex','女');
                }
           },
        });
    </script>
</body>

</html>